<template>
    <a-layout class="bg-image" style="min-height: 100vh;">
        <a-layout-content>
            <div id="login-box">
                <!-- 左侧图案 -->
                <div class="login-banner">
                    <div class="badge"/>
                    <img class="image" src="@/assets/login/login-banner.png">
                </div>
                <!-- 右侧表单区：login/logon/retrieve -->
                <a-form ref="loginForm" v-show="mode!='logon' && mode!='retrieve'" :model="login.param" :rules="login.rules" class="login-form">
                    <a-row>
                        <h3 class="title">亲爱的朋友，欢迎您登陆！😁😁</h3>
                    </a-row>
                    <a-form-item name="username">
                        <a-input v-model:value="login.param.username" placeholder="请输入登陆账号" size="large" @keyup.enter="handleLogin">
                            <template #prefix>
                                <user-outlined style="margin-right: 5px; color: rgba(0, 0, 0, 0.45)"/>
                            </template>
                        </a-input>
                    </a-form-item>
                    <a-form-item name="password">
                        <a-input-password v-model:value="login.param.password" placeholder="请输入登陆密码" size="large" @keyup.enter="handleLogin">
                            <template #prefix>
                                <lock-outlined style="margin-right: 5px; color: rgba(0, 0, 0, 0.45)"/>
                            </template>
                        </a-input-password>
                    </a-form-item>
                    <a-form-item>
                        <a-row :gutter="2">
                            <a-col :span="16">
                                <a-input v-model:value="login.param.captcha" placeholder="请输入计算结果" size="large" @keyup.enter="handleLogin">
                                    <template #prefix>
                                        <calculator-outlined style="margin-right: 5px; color: rgba(0, 0, 0, 0.45)"/>
                                    </template>
                                </a-input>
                            </a-col>
                            <a-col :span="8">
                                <img :src="login.origin.image" style="width: 100%; height: 40px;" @click="loadCaptcha">
                            </a-col>
                        </a-row>
                    </a-form-item>
                    <a-row>
                        <a-button size="large" type="primary" style="width: 100%;" :loading="login.loading" :disabled="login.loading" html-type="submit" @click="handleLogin">登&nbsp;&nbsp;&nbsp;&nbsp;陆</a-button>
                    </a-row>
                    <a-row class="tip">
                        <!--<a-button type="link" style="padding: 0px;" @click="mode='retrieve'">忘记密码了？</a-button>-->
                        <!--<a-button type="link" style="padding: 0px;" @click="mode='logon'">还没有账号？立即注册</a-button>-->
                    </a-row>
                </a-form>
            </div>
        </a-layout-content>
        <a-layout-footer style="text-align: center">
            <page-footer/>
        </a-layout-footer>
    </a-layout>
</template>

<script>
    import {defineComponent, onMounted, reactive, ref, toRefs} from 'vue';
    import {useRouter} from 'vue-router';
    import store from 'store';
    import PageFooter from '@/layout/page-footer.vue';

    export default defineComponent({
        components: {
            PageFooter
        },
        setup() {
            const state = reactive({
                // 三个表单
                loginForm: ref(),
                // 模式：login/logon/retrieve
                mode: 'login',
                // 登陆参数
                login: {
                    // 加载中，禁用登陆按钮
                    loading: false,
                    // 原始信息
                    origin: {
                        publicKey: null,
                        loginSeq: null,
                        image: null
                    },
                    // 登陆参数
                    param: {
                        username: '',
                        password: '',
                        captcha: ''
                    },
                    // 登陆校验规则
                    rules: {
                        username: [{
                            required: true,
                            message: '登陆账号不能为空'
                        }],
                        password: [{
                            required: true,
                            message: '登陆密码不能为空'
                        }]
                    }
                }
            });
            const router = useRouter();

            // 加载图形验证码
            const loadCaptcha = () => {
                // TODO
            };
            // 登陆
            const handleLogin = () => {
                state.loginForm.validate().then(() => {
                    // 设置登陆token，30分钟过期
                    store.set("sa-token", {isLogin: true}, new Date().getTime() + 30 * 60 * 1000);
                    // 跳转首页
                    router.push("/");
                }).catch(() => {
                });
            };

            // 加载页面
            onMounted(() => {
                // 获取图形二维码
                loadCaptcha();
            });

            return {
                ...toRefs(state),
                loadCaptcha,
                handleLogin
            };
        }
    });
</script>

<style lang="scss" scoped>
    .bg-image {
        background-image: url('@/assets/login/background.svg');
        background-size: contain;
        background-repeat: no-repeat;
    }

    #login-box {
        display: flex;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        background-color: #FFFFFF;
        border-radius: 10px;
        box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
        justify-content: space-between;
        overflow: hidden;

        .login-banner {
            position: relative;
            width: 450px;
            background-color: #F5F7FA;
            overflow: hidden;

            .badge {
                position: absolute;
                top: 20px;
                left: 20px;
                width: 36px;
                height: 36px;
                border-radius: 4px;
                background-image: url('@/assets/logo.png');
                background-size: contain;
                background-repeat: no-repeat;
                box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
            }

            .image {
                position: absolute;
                top: 50%;
                width: 100%;
                transform: translateY(-50%);
            }
        }

        .login-form {
            display: flex;
            flex-direction: column;
            width: 500px;
            min-height: 500px;
            padding: 50px;
            justify-content: center;
            overflow: hidden;

            .title {
                margin: 0 auto 30px;
                font-size: 1.6em;
                font-weight: bold;
                color: #303133;
            }

            .tip {
                display: flex;
                margin-top: 20px;
                align-items: center;
                justify-content: space-between;
            }
        }
    }
</style>
